import { BlockEnum, NodeProps } from '@/components/workflow/types'
import { useWorkFlowStore } from '@/store/workflowStore'
import { CaretRightOutlined } from '@ant-design/icons'
import { Collapse } from 'antd'
import { cloneDeep } from 'lodash'
import type { FC } from 'react'
import React, { useCallback, useState } from 'react'
import { ComponentDescMap } from '../../constants'
import CollapseNodeComponent from '../components/CollapseNodeComponent'
import '../style.less'
import { InputVar, MoreInfo } from '../types'
import ParamList from './components/ParamList'
import { StartNodeType } from './types'

const StartPanel: FC<NodeProps<StartNodeType>> = ({ id, data }) => {
  const { setFlowVariables } = useWorkFlowStore()
  const [variables, seVariables] = useState<InputVar[]>(cloneDeep(data.variables))

  const handleVarListChange = useCallback(
    (newList: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => {
      const newVariables: InputVar[] = cloneDeep(newList)
      seVariables(newVariables)
      setFlowVariables(id, data.title, { variables: newVariables })
    },
    [variables, seVariables]
  )
  return (
    <div className="workflow-common-panel">
      <div className="common-panel-desc">{data.desc || ComponentDescMap[BlockEnum.Start]}</div>
      <div className="nodrag cursor-default">
        <Collapse
          bordered={false}
          defaultActiveKey={['1']}
          expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
          className="bg-[#fafafa]"
          items={[
            {
              key: '1',
              label: (
                <CollapseNodeComponent
                  title="输入"
                  tooltipText="定义启动工作流所需的输入参数，这些内容将在智能体对话过程中被大语言模型阅读，使大语言模型在合适的时机启动工作"
                ></CollapseNodeComponent>
              ),
              children: (
                <>
                  <div className="ml-[1px] flex">
                    <div className="input-head w-[25%] mr-1 ">变量名</div>
                    <div className="input-head w-[25%] mr-1 ">变量类型</div>
                    <div className="input-head w-[30%] ">描述</div>                    
                    <div className="input-head w-[12%] justify-center">必填</div>
                  </div>
                  <ParamList readonly={false} info={data} list={variables} onChange={handleVarListChange} />
                </>
              )
            }
          ]}
        />
      </div>
    </div>
  )
}

export default React.memo(StartPanel)
